// 暴露出去一个实例化的 vue-router 的路由实例对象

// 引入 Vue 核心
import Vue from 'vue'

// 引入 vue-router 插件
import VueRouter from 'vue-router'

// 引入定义好的路由组件 views 文件中写的组件 @ => src
import HelloHome from '@/views/HelloHome'
import HelloAbout from '@/views/HelloAbout'
import HelloDetail from '@/views/HelloDetail'

// 注册 vue-router 插件
Vue.use(VueRouter)

// 实例化 路由实例对象
const router = new VueRouter({
  // 配置选项

  // 路由规则集合
  routes: [
    {
      // 一条规则, 一条路由信息
      path: '/home',
      name: 'abc', // 命名路由 具有名字的路由 给当前规则取个名字  跳转可以使用 name
      component: HelloHome
    },
    {
      // 一条规则, 一条路由信息
      path: '/about',
      name: 'about', // 命名路由 具有名字的路由 给当前规则取个名字  跳转可以使用 name
      component: HelloAbout
    },
    {
      // #/detail/a/b   能匹配到
      // #/detail/c/d   能匹配到
      // #/detail       不能
      // #/detail/a     不能
      path: '/detail/:id/:name',
      name: 'detail',

      // ！！！！ props 需要你在组件中通过 props 选项先定义，不然这里传递过去的，组件中将是 $attrs 接收到的。

      // // props 选项的 第一种使用方式  布尔值
      // props: true,

      // props 选项的 第二中使用方式 对象式, 静态传递属性给当前规则的组件
      // props: {
      //   a: '10',
      //   b: '20',
      //   c: true,
      //   id: 100,
      // },

      // props 选项的 第三种使用方式 函数式
      props: function (route) {
        console.log('====', route)
        return {
          // 期望属性 a 是变化的 id 而不是写死的 10
          // a: '10',
          // b: '20'

          // a: route.params.id

          // 满足页面需要的代码
          id: route.params.id,
          name: route.params.name
        }
      },
      component: HelloDetail
    },
  ]
})

// 暴露
export default router